{% extends 'layui/admin/base.html' %}
{% block content %}
    <blockquote class="layui-elem-quote">
        <p><a href="/admin/v2"><i class="layui-icon layui-icon-home"></i> 首页</a>
            <i class="layui-icon layui-icon-next"></i> 图片管理</p>
    </blockquote>
    <div class="layui-panel">
        <div class="layui-card">
            <div class="layui-card-header">
                <h1>图片管理</h1></div>
            <div class="layui-card-body">
                <table id="imgTable" lay-filter="imgTableFilter"></table>
            </div>
        </div>

    </div>
{% endblock %}

{% block scripts %}
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            const table = layui.table;
            const layer = layui.layer;
            const $ = layui.$;

            // 渲染表格
            table.render({
                elem: '#imgTable',
                url: '/api/images/',
                method: 'get',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                page: true,
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.count,
                        data: res.data
                    };
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 60, sort: true},
                    {field: 'filename', title: '文件名', width: 250},
                    {
                        field: 'filepath',
                        title: '预览',
                        width: 120,
                        templet: d => `<img src="${d.filepath}" alt="${d.filename}" style="height: 30px;cursor: pointer;" lay-event="view">`
                    },
                    {field: 'source_url', title: '来源链接', width: 500},
                    {field: 'upload_ip', title: '上传IP', width: 140},
                    {field: 'created_at', title: '创建时间'},
                    {
                        title: '操作',
                        width: 120,
                        templet: function (d) {
                            return `
                                <button class="layui-btn layui-btn-xs" lay-event="view">查看</button>
                                <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
                            `;
                        }
                    }
                ]],
                text: {
                    none: '暂无图片数据'
                }
            });

            // 操作事件监听
            table.on('tool(imgTableFilter)', function (obj) {
                const data = obj.data;
                const event = obj.event;

                if (event === 'view') {
                    // 查看大图
                    layer.open({
                        type: 1,
                        title: '图片预览',
                        area: ['600px', '600px'],
                        shadeClose: true,
                        content: `<div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                <img src="${data.filepath}" alt="" style="max-width: 100%; max-height: 100%;">
            </div>`
                    });
                } else if (event === 'delete') {
                    layer.confirm('确定要删除该图片吗？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            url: `/api/image/${data.id}`,
                            type: 'DELETE',
                            headers: {
                                'Authorization': 'Bearer ' + localStorage.getItem('token')
                            },
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg('删除成功');
                                    table.reload('imgTable', {page: {curr: 1}});
                                } else {
                                    layer.msg(res.msg || '删除失败', {icon: 2});
                                }
                            },
                            error: function () {
                                layer.msg('请求失败', {icon: 2});
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
{% endblock %}
